<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta name="format-detection" content="telephone=no">
	<meta content="telephone=no" name="format-detection">
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<link rel="stylesheet" media="screen and (max-width:900px)" href="/assets/stylesheets/style_wap.css" type="text/css" />
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/assets/stylesheets/style_pc.css" type="text/css" />
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/assets/stylesheets/jquery-ui.css" type="text/css" />
	<title>积分明细</title>
</head>
<body>
<!-- 前端嵌套写法，仅供前端使用，首页有完整代码 -->
<div class="topline" id="J_topline" data-til="积分明细">
	<nav th:replace="hjh/include::menuV"></nav>
</div>

<div class="jifentop">
	<p class="fjline clearfix"><input type="date" id="beginDate" name="beginDate" class="J_ctrol ctrol" placeholder="起始时间" data-target="timestart"><span class="drowsp">-</span><input type="date" name="endDate" class="J_ctrol ctrol" placeholder="截止时间" data-target="timeend"></p>
	<p class="clearfix"><select class="ctrol ctrola" id="J_wsort" th:value="${type}"><option value="0">全部
	</option><option value="1">提现</option><option value="2">转账</option><option value="3">分润</option><option
			value="-1">其他</option></select><a href="javascript:;" class="btn btn_sm" id="J_wapbtn">确定</a></p>
</div>

<div class="jifen content">
	<div class="btil">
		积分明细<span class="btilt">共<span class="btilc" th:text="${total}">45</span>条数据</span>
		<div class="shai">
			<div class="drowbox">
				<p class="drowopt" id="J_drowtil" data-value="0">交易类型</p>
				<div class="drowmenu">
					<a href="javascript:;" class="drowls" data-value="0" data-key="交易类型">全部</a>
					<a href="javascript:;" class="drowls" data-value="1" data-key="提现">提现</a>
					<a href="javascript:;" class="drowls" data-value="2" data-key="转账">转账</a>
					<a href="javascript:;" class="drowls" data-value="3" data-key="分润">分润</a>
					<a href="javascript:;" class="drowls" data-value="-1" data-key="其它">其它</a>
				</div>
			</div>
			<p class="drowline drowline_pc clearfix"><input type="text" readonly="readonly" name="" class="ctrol" id="timestart" placeholder="起始时间"><span class="drowsp">-</span><input type="text" readonly="readonly" name="" class="ctrol" id="timeend" placeholder="截止时间"></p>
			<a href="javascript:;" class="btn" id="J_pcbtn">确定</a>
		</div>
	</div>
	<div class="jfth">
		<p class="wa fl">编号</p>
		<p class="wb fl">会员账号</p>
		<p class="wc fl">金额(元)</p>
		<p class="wf fl">交易类型</p>
		<p class="wg fl">操作时间</p>
	</div>
	<div class="list">
		<div class="item" th:each="product:${productPoints}" >
			<div class="wa fl"><p class="wapi">编号</p><p class="val" th:text="${product.id}">7384949789</p></div>
			<div class="wb fl"><p class="wapi">会员账号</p><p class="val" th:text="${product.memberName}">Np2847</p></div>
			<div class="wc fl"><p class="wapi">金额(元)</p><p class="val"  th:text="${product.amount}">567.00</p></div>
			<div class="wf fl"><p class="wapi">交易类型</p><p class="val" th:text="${product.type}">提现</p></div>
			<div class="wg fl"><p class="wapi">操作时间</p><p class="val"  th:text="${#dates.format(product.operateDate, 'yyyy-MM-dd HH:mm')}">2018-02-28</p></div>
		</div>
	</div>
</div>
<nav th:replace="hjh/include::bottomV"></nav>
<script language="javascript" type="text/javascript" src="/assets/javascript/jquery-2.1.4.min.js"></script>
<script language="javascript" type="text/javascript" src="/assets/javascript/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="/assets/javascript/func.js"></script>
<script type="text/javascript" th:inline="javascript">
    $(function(){
		var beginDate = [[${beginDate}]];
		var endDate = [[${endDate}]];
		var ttype = [[${type}]];
        var dateFormat = "yy-dd-mm",
            from = $( "#timestart" ).datepicker({
                defaultDate: "+1w",
                dateFormat: "yy-mm-dd",
                changeMonth: true,
                numberOfMonths: 2
            }).on( "change", function() {
                to.datepicker( "option", "minDate", getDate( this ) );
                sort.timestart = $(this).val();
            }),
            to = $( "#timeend" ).datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                dateFormat: "yy-mm-dd",
                numberOfMonths: 2
            }).on( "change", function() {
                from.datepicker( "option", "maxDate", getDate( this ) );
                sort.timeend = $(this).val();
            });

        function getDate( element ) {
            var date;
            try {
                date = $.datepicker.parseDate( dateFormat, element.value );
            } catch( error ) {
                date = null;
            }
            return date;
        };


        var sort = {"type":ttype,"timestart":beginDate,"timeend":endDate};
		if(ttype==0){
            $('#J_drowtil').html("交易类型");
		}else if(ttype==1){
            $('#J_drowtil').html("提现");
        }else if(ttype==2){
            $('#J_drowtil').html("转账");
        }else if(ttype==3){
            $('#J_drowtil').html("分润");
        }else if(ttype==-1){
            $('#J_drowtil').html("其他");
        }


        $('#J_pcbtn').click(function(){
//            alert('筛选条件：'+JSON.stringify(sort))
            window.location.href = '/product_points_list?type='+sort.type+"&beginDate="+sort.timestart+"&endDate="+sort.timeend; // 跳转
        });
        $('.drowls').click(function(){
            var self = $(this),
                v = self.attr('data-value'),
                k = self.attr('data-key');

            $('#J_drowtil').html(k);
            sort.type = v;
        });

        $('#J_wsort').change(function(){
            sort.type = $(this).val();
        });

        var J_ctrol = $('.J_ctrol');
        $('#J_wapbtn').click(function(){
            for(var i=0;i<2;i++){
                var elm = J_ctrol.eq(i),
                    v = elm.val(),
                    k = elm.attr('data-target');
                sort[k] = v;
            }
            ttype = $('#J_wsort').val();
            window.location.href = '/product_points_list?type='+sort.type+"&beginDate="+sort.timestart+"&endDate="+sort.timeend; // 跳转
            //alert('筛选条件：'+JSON.stringify(sort))
        });


        //设置默认日期
        $("input[name='beginDate']").val(beginDate);
        from.datepicker("setDate",beginDate);

        $("input[name='endDate']").val(endDate);
        to.datepicker("setDate",endDate);

    });
</script>
</body>
</html>
